<template>
    <div>
        <div class="order-detail">
            <ol>
                <li>
                    <span class="first">订单号</span>
                    <span>10000000000</span>
                </li>
                <li>
                    <span class="first">发货人</span>
                    <span>王小明 15812345698</span>
                </li>
                <li>
                    <span class="first">取书地址</span>
                    <span>取书地址</span>
                </li>
            </ol>

        </div>
        <div class="operation">
            <p class="concat">联系客服</p>
            <p class="cancle" @click="actionSheet">取消订单</p>
        </div>

        <i-action-sheet :visible="visible" :actions="actions" show-cancel @cancel="handleCancel" @click="handleClickItem" />
    </div>
</template>
<script>
export default {
    data() {
        return {
            visible: false,
            actions: [
                {
                    name: '订单信息有误',
                    value: 'q2113'
                },
                {
                    name: '收入太低'
                },
                {
                    name: '不想卖了'
                },
                {
                    name: '其他原因'
                }
                // {
                //     name: '去分享',
                //     icon: 'share',
                //     openType: 'share'
                // }
            ]
        }
    },
    methods: {
        getValue(e) {
            console.log(e)
        },
        actionSheet() {
            this.visible = true
        },
        handleCancel() {
            this.visible = false
        },
        handleClickItem(detail) {
            // const index = { detail }
            this.$nextTick(() => {
                console.log({ detail })
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.order-detail {
    padding: 20rpx 18rpx 30rpx 18rpx;

    ol {
        li {
            height: 60rpx;
            line-height: 60rpx;
            span {
                font-size: 28rpx;
                color: #666;
                &.first {
                    margin-right: 60rpx;
                }
            }
        }
    }
}
.operation {
    height: 90rpx;
    border-top: 1px solid #e5e5e5;
    padding: 0 18rpx;
    p {
        float: right;
        height: 68rpx;
        width: 236rpx;
        border-radius: 10px;
        line-height: 68rpx;
        text-align: center;
        margin-top: 11rpx;
        &.concat {
            border: 1px solid #c78550;
            background: #c78550;
            color: #fff;
        }
        &.cancle {
            border: 1px solid #666;
            color: #666;
            margin-right: 20rpx;
        }
    }
}
</style>
